const ReactDOM = { render }
/**
 * 
 * @param {*} vnode ReactDOM.render的第一个参数  为node节点
 * @param {*} container ReactDOM.render的第二个参数  为container容器
 */
function render(vnode, container) {
    //判断 vnode是否存在 若不存在直接return
    if (vnode === undefined) return
    //判断传入的vnode是否为一个字符串类型  如果是的直接渲染
    if (typeof (vnode) === 'string') {
        const textnode = document.createTextNode(vnode)
        return container.appendChild(textnode)
    }
    console.log(vnode)
    //dom存在
    const { tag, attrs, children } = vnode
    const tagele = document.createElement(tag)
    if (attrs) {
        Object.keys(attrs).map(key => {
            const value = attrs[key]
            setSttribute(key, value, tagele)
        })
    }
    //递归渲染子节点
    children.forEach(element => render(element, tagele))
    return container.appendChild(tagele)
}
//设置标签上的属性
function setSttribute(key, value, tagele) {
    console.log(key, value, tagele)
    //将className变为class
    if (key == 'className') {
        key = 'class'
    }
    if (/on\w/.test(key)) {
        tagele[key] = value || ''
    } else if (key == 'style') {
        if (!value || typeof value === 'string') {
            tagele.style.cssText = value || ''
        } else if (value && typeof value == 'object') {
            for (let k in value) {
                if (typeof value[k] === 'number') {
                    tagele.style[k] = value[k] + 'px'
                } else {
                    tagele.style[k] = value[k]
                }
            }
        }
    } else {
        //
        if (key in tagele) {
            tagele[key] = value || ''
        }
        //值存在 更新
        if (value) {
            tagele.setAttribute(key, value)
        } else {
            tagele.removeAttribute(key)
        }
    }
}
export default ReactDOM